<template>
  <!--  trigger="click" -->
  <el-dropdown trigger="click">
    <div class="el-dropdown-link">
      <el-icon class="el-icon--right">
        <svg-icon icon-name="ant-design:font-size-outlined"></svg-icon>
      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          :disabled="item.value === appStore.size"
          v-for="item in sizeOptions"
          :key="item.lable"
          @click="appStore.setSize(item.value as Size)"
          >{{ item.lable }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { type Size } from '@/plugins/element'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const sizeOptions = ref([
  {
    lable: 'Default',
    value: 'default'
  },
  {
    lable: 'Large',
    value: 'large'
  },
  {
    lable: 'Small',
    value: 'small'
  }
])
</script>

<style lang="scss" scoped>
@use '@/styles/variables.module.scss' as *;
.el-dropdown-link {
  line-height: 40px;
  font-size: 20px;
  margin-top: 5px;
  color: $colorWhite;
  cursor: pointer;
}
</style>
